{extend name="./base" /}

{block name="css"}
<style>
	.site_list{width: 100%;min-height: 800px; display: flex;flex-wrap: wrap;background-color: #ffffff;padding: 20px;align-content:flex-start;}
	.item-block{width: 15%;margin-right: 2%;margin-bottom: 25px;display: flex;justify-content: space-around;background-color: #f7f8fa;height: 50px;padding: 15px}
	.item-pic{width: 40px;height:40px;}
	.item-pic img{max-width: 100%;max-height: 100%;}
	.item-con{display: flex; flex-direction: column;margin-left: 20px;}
	.item-con-title{font-size: 14px;color: #666;}
	.item-con-desc{font-size: 12px;color: #999;}
	.item-act{line-height: 40px}
</style>
{/block}

{block name="body"}
<div class="site_list">
	{foreach $data as $item}
	<div class="item-block">
		<div class="item-pic">
			<img src="__STATIC__/img/addon/{$item['keyname']}.png">
		</div>
		<div class="item-con">
			<div class="item-con-title">{$item['title']}</div>
			<div class="item-con-desc">{$item['desc']}</div>
		</div>
		<div class="item-act">
			{if $item['status'] == 1}
			<a class="layui-btn layui-btn-xs" data-keyname="{$item['keyname']}" onclick="uninstall(this)">卸载</a>
			{else}
			<a class="layui-btn layui-btn-xs" data-keyname="{$item['keyname']}" onclick="install(this)">安装</a>
			{/if}
		</div>
	</div>
	{/foreach}
</div>
{/block}

{block name="script"}
<script>

	function install(obj){
		let keyname = $(obj).attr('data-keyname');
		$.post('/admin/addons/install', {keyname: keyname}, function(res){
			if (res.code == 0){
				layer.msg('安装成功', {time: 1000}, function(){
					window.location.reload();
				})
			}else{
				layer.msg(res.msg)
			}

		});
	}
	function uninstall(obj){
		let keyname = $(obj).attr('data-keyname');
		$.post('/admin/addons/uninstall', {keyname: keyname}, function(res){
			if (res.code == 0){
				layer.msg('卸载成功', {time: 1000}, function(){
					window.location.reload();
				})
			}else{
				layer.msg(res.msg)
			}

		});
	}
</script>
{/block}